<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div @click="toDocker">
          <div class="img">
            <img alt="docker" :src="dockerImage" />
          </div>
          <div class="title" @click="showContent(1)">docker-compose</div>
          <div v-for="(item,index) in list" :key="index" >
              <div v-if="false" style="text-align: center;margin-top: 20px;">
                <el-button style="font-size: 60px;" @click="showContent(item.id)" >{{item.title}}</el-button>
              </div>
              <div v-if="item.isContentShow" style="margin: 20px 100px;font-size: 60px;" >
                <el-card>
                  <div>{{item.content}}</div>
                </el-card>
              </div>
          </div>
        </div>
      </el-col>
<!--      <el-col :span="12">-->
<!--        <div @click="toVue">-->
<!--          <div class="img">-->
<!--            <img alt="vue" :src="vueImage" />-->
<!--          </div>-->
<!--          <div class="title">vue</div>-->
<!--        </div>-->
<!--      </el-col>-->
    </el-row>
  </div>

</template>

<script>
import dockerImage from '/src/assets/docker.png'
import vueImage from '/src/assets/vue.png'
export default {
  name: "index",
  data:()=> {
    return {
      dockerImage:dockerImage,
      vueImage:vueImage,
      list:[
        {id:1,title:'什么是docker-compose?',content:"Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose，您可以使用 YML 文件来配置应用程序需要的所有服务。然后，使用一个命令，就可以从 YML 文件配置中创建并启动所有服务。",isTitleShow:true,isContentShow:false},
      ]
    }
  },
  methods:{
    toDocker(){

    },
    toVue(){

    },
    showContent(id){
      for(var k in this.list){
        let item = this.list[k];
        if(item.id == id){
          this.list[k].isContentShow = true;
        }
      }
    }
  }
}
</script>

<style scoped>
  .img{
    text-align: center;
  }
  .title{
    text-align: center;
    font-size:70px;
    color: #808689;
  }
  .el-collapse-item__header{
    font-size: 60px;
  }
</style>